<template>
  <div class="indtop">
    <div class="indt">
      <!-- C:/Users/13153/Desktop/第四阶段vuereact/firstw  手机/shop/src/assets/image/banner/index/定位.png -->
      <div class="indt1">
        <img src="../assets/image/banner/index/定位.png" alt="" />
      </div>

      <div class="indt2">
        <img src="../assets/image/pic/logo/white.png" alt="" />
      </div>
<router-link to="/search">
      <div class="indt3">
        <input type="search" placeholder="        安内容搜索" />
      </div>
</router-link>
      <div>
        <img src="../assets/image/icon/shortcut/commodify/store.png" alt="" />
      </div>
    </div>
    <ul class="indtopu">
      <li v-for="(item, i) in guid" :key="i">
        {{ item.name }}
      </li>
    </ul>
    <div class="fen">分类</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      guid: [
        {
          id: 1,
          name: "推荐",
        },
        {
          id: 2,
          name: "女装",
        },
        {
          id: 3,
          name: "鞋包",
        },
        {
          id: 4,
          name: "居家",
        },
        {
          id: 5,
          name: "母婴",
        },
        {
          id: 6,
          name: "美妆",
        },
        {
          id: 7,
          name: "科技",
        },
      ],
    };
  },
};
</script>
<style>
.indtop {
  width: 100%;
  height: 1.6rem;
  background: #ff6040;
  margin-top: 1.767rem;
  position: relative;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  /* border-top: 1px #ff6040 solid; */
}
.indt {
  display: flex;
  justify-content: space-evenly;
}
.indt1 {
  width: 0.5rem;
  height: 0.5rem;
  /* background: #c5b4b0; */
}
.indt1 img {
  width: 0.5rem;
  height: 0.5rem;
}
.indt2 {
  width: 1.82rem;
  height: 0.48rem;
  /* background: white; */
}
.indt2 img {
  width: 1.82rem;
  height: 0.48rem;
}
.indt3 {
  width: 3.4rem;
  height: 0.64rem;
  background: white;
  border-radius: 0.12rem;
}
.indt3 input {
  width: 3.4rem;
  height: 0.64rem;
  background: url(../assets/image/banner/index/搜索.png) no-repeat 5% ;
  background-size: 0.32rem 0.32rem;
  
}
.indtopu {
  display: flex;
  justify-content: space-around;
  color: white;
  position: relative;
  top: 0.5rem;
}
.fen {
  color: white;
  position: absolute;
  right: 0%;
  z-index: 1;
  bottom: 0.35rem;
  right: 0.25rem;
  background: #ff6040;
  background-image: linear-gradient(180deg, #ff7a68 0%, #ff8a80 100%);
  box-shadow: -5px 5px 10px -5px #e63d2e;
}
</style>